import React, { useState } from 'react';
import { Card, Form, Input, Button, message, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { history } from 'umi';
import { authApi } from '@/services/api';
import styles from './Login.less';

interface LoginFormData {
  username: string;
  password: string;
  remember: boolean;
}

const Login: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (values: LoginFormData) => {
    setLoading(true);
    try {
      const data = await authApi.login({
        username: values.username,
        password: values.password,
      });
      
      message.success('登录成功');
      // 保存token，处理后端返回的数据结构
      const token = data.data?.access_token || data.data?.token || data.access_token || data.token;
      if (token) {
        localStorage.setItem('token', token);
      }
      history.push('/dashboard');
    } catch (error: any) {
      const errorMessage = error?.response?.data?.message || error?.message || '登录失败';
      message.error(errorMessage);
      console.error('Login error:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.top}>
          <div className={styles.header}>
            <img alt="logo" className={styles.logo} src="/logo.svg" />
            <span className={styles.title}>系统管理后台</span>
          </div>
          <div className={styles.desc}>现代化的企业级管理系统</div>
        </div>

        <div className={styles.main}>
          <Card className={styles.loginForm}>
            <Form
              form={form}
              name="login"
              initialValues={{ remember: true }}
              onFinish={handleSubmit}
              size="large"
            >
              <Form.Item
                name="username"
                rules={[
                  { required: true, message: '请输入用户名' },
                  { min: 2, message: '用户名至少2个字符' },
                ]}
              >
                <Input
                  prefix={<UserOutlined />}
                  placeholder="用户名"
                  autoComplete="username"
                />
              </Form.Item>

              <Form.Item
                name="password"
                rules={[
                  { required: true, message: '请输入密码' },
                  { min: 6, message: '密码至少6个字符' },
                ]}
              >
                <Input.Password
                  prefix={<LockOutlined />}
                  placeholder="密码"
                  autoComplete="current-password"
                />
              </Form.Item>

              <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                  <Checkbox>记住我</Checkbox>
                </Form.Item>
                <a className={styles.forgot} href="/user/forgot">
                  忘记密码
                </a>
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  className={styles.submit}
                  loading={loading}
                  block
                >
                  登录
                </Button>
              </Form.Item>

              <div className={styles.other}>
                还没有账号？
                <a href="/user/register">立即注册</a>
              </div>
            </Form>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default Login;